<template>
  <el-card>
    <div slot="header">
      <span>问卷管理</span>
      <el-button type="primary" @click="addPaper" size="mini">添加问卷</el-button>
    </div>
    <el-table :data="papers" stripe>
      <el-table-column label="创建时间">
        <template v-slot:default="{row}">{{moment(row.ctime).format('YYYY-MM-DD HH:mm:ss')}}</template>
      </el-table-column>
      <el-table-column prop="title" label="标题"></el-table-column>
      <el-table-column label="班级">
        <!-- 内容分发 -->
        <template v-slot:default="{row}">
          {{row.classes[0].class_name}}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot:default="{row}">
          <el-link icon="el-icon-edit" type="primary" @click="edit(row.id)" size="mini">编辑&nbsp;&nbsp;&nbsp;</el-link>
          <el-link type="danger" @click="del(row.id)" size="mini">删除&nbsp;&nbsp;&nbsp;</el-link>
          <el-link type="primary" @click="release(row.id)" size="mini">发布&nbsp;&nbsp;&nbsp;</el-link>
          <el-link type="primary" @click="analysis(row.id)" size="mini">分析&nbsp;&nbsp;&nbsp;</el-link>
          <el-link type="primary" @click="qrcode(row.id)" size="mini">二维码&nbsp;&nbsp;&nbsp;</el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog style="text-align:center" title="扫码答卷" :visible.sync="visible" width="400px">
      <img :src="codeImg" alt />
    </el-dialog>

    <div style="margin-top:10px;">
      <el-pagination 
      background 
      layout="prev, pager, next" 
      :total="total" 
      :page-size="pageSize" 
      @current-change="toPage" 
      :pager-count="5">
      </el-pagination>
    </div>
  </el-card>
</template>
<script>
import moment from "moment";
import jrQrcode from "jr-qrcode";

export default {
  data() {
    return {
      visible: false,
      moment,
      papers: [],
      currentPage: 0,
      pageSize: 5,
      total: 0,
      codeImg: ""
    };
  },
  created() {
    this.getPapers();
  },

  methods: {
    qrcode(id) {
      this.visible = true;
      const imgBase64 = jrQrcode.getQrBase64("" + id);
      this.codeImg = imgBase64;
    },
    analysis(id) {
      this.$router.push({
        name: "PaperAnalysis",
        params: {
          id
        }
      });
    },
    release(id) {
      this.$router.push({
        name: "PapersRelease",
        params: {
          id
        }
      });
    },
    edit(id) {
      this.$router.push({
        name: "HomePapersEdit",
        params: {
          id
        }
      });
    },
    async del(id) {
      await this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      });
      //   this.loading = true;
      await this.axios({
        method: "delete",
        url: `/papers/del/${id}`
      });
      //   this.loading = false;
      this.$message.success("删除成功");
      this.getPapers();
    },
    async getPapers(page = 1) {
      this.loading = true;
      const {
        data: { data: { rows, pageSize, currentPage, total } }
      } = await this.axios({
        method: "get",
        url: "/papers",
        //分页，以及每页有几条数据
        params: {
          pageSize: 5,
          currentPage: page,
          field: this.field,
          fieldVal: this.fieldVal
        }
      });
      this.papers = rows;
      this.loading = false;
      this.pageSize = pageSize;
      this.currentPage = currentPage;
      this.total = total;
    },
    toPage(num) {
      this.getPapers(num);
    },

    addPaper() {
      this.$router.push({
        name: "HomePapersAdd"
      });
    },
    // async getPapers() {
    //   const { data: { data } } = await this.axios({
    //     url: "/papers"
    //   });
    //   this.papers = data.rows;
    // }
  }
};
</script>

